AngularJS Expressions
AngularJS Expressions பயன்படுத்தி தரவை HTML உடன் இணைக்கிறது.
AngularJS expressions இரட்டை அடைப்புக்குறிக்குள் எழுதப்படலாம்: {{ expression }}.
AngularJS expressions ஒரு directive உள்ளும் எழுதப்படலாம்: ng-bind="expression".
AngularJS expression ஐத் தீர்த்து, expression எழுதப்பட்ட இடத்திலேயே முடிவைத் திரும்பப் பெறும்.
AngularJS expressions JavaScript expressions போன்றவை: அவை literals, operators, மற்றும் variables ஐக் கொண்டிருக்கலாம்.
உதாரணம் {{ 5 + 5 }} அல்லது {{ firstName + " " + lastName }}
அடிப்படை உதாரணம்
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>முக்கியமான குறிப்பு:
நீங்கள் ng-app directive ஐ நீக்கினால், HTML expression ஐத் தீர்க்காமல் அப்படியே காட்டும்:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>நீங்கள் விரும்பும் எங்கும் expressions எழுதலாம், AngularJS expression ஐத் தீர்த்து முடிவைத் திரும்பப் பெறும்.
CSS பண்புக்கூறு உதாரணம்
கீழே உள்ள உள்ளீட்டுப் பெட்டியின் மதிப்பை மாற்றுவதன் மூலம் அதன் நிறத்தை மாற்றவும்:
<div ng-app="" ng-init="myCol='lightblue'">
<input style="background-color:{{myCol}}" ng-model="myCol">
</div>AngularJS எண்கள்
AngularJS எண்கள் JavaScript எண்களைப் போன்றவை:
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>ng-bind பயன்படுத்தி அதே உதாரணம்:
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>குறிப்பு:
ng-init பயன்படுத்துவது மிகவும் பொதுவானது அல்ல. தரவைத் துவக்க ஒரு சிறந்த வழியை கட்டுப்பாட்டாளர்கள் பற்றிய அத்தியாயத்தில் நீங்கள் கற்றுக்கொள்வீர்கள்.
AngularJS சரங்கள்
AngularJS சரங்கள் JavaScript சரங்களைப் போன்றவை:
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>ng-bind பயன்படுத்தி அதே உதாரணம்:
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>AngularJS பொருள்கள்
AngularJS பொருள்கள் JavaScript பொருள்களைப் போன்றவை:
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>ng-bind பயன்படுத்தி அதே உதாரணம்:
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>AngularJS வரிசைகள்
AngularJS வரிசைகள் JavaScript வரிசைகளைப் போன்றவை:
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>ng-bind பயன்படுத்தி அதே உதாரணம்:
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is <span ng-bind="points[2]"></span></p>
</div>AngularJS Expressions vs. JavaScript Expressions
| பண்புக்கூறு | AngularJS Expressions | JavaScript Expressions |
|---|---|---|
| Literals, operators, variables | ✓ ஆம் | ✓ ஆம் |
| HTML உள்ளே எழுதுதல் | ✓ ஆம் | ✗ இல்லை |
| Conditionals (if, else) | ✗ இல்லை | ✓ ஆம் |
| Loops (for, while) | ✗ இல்லை | ✓ ஆம் |
| Exceptions (try, catch) | ✗ இல்லை | ✓ ஆம் |
| Filters | ✓ ஆம் | ✗ இல்லை |
மேலும் கற்றுக்கொள்ளுங்கள்:
எங்கள் JavaScript டுடோரியலில் JavaScript பற்றி மேலும் அறிந்து கொள்ளுங்கள்.